<template>
    <div>
      <q-card>
        <q-card-section>
            <div style="" class="scroll">
              <template>
                <q-btn style="margin-bottom:6px;" dense color="light-blue" :label="$t('创建品类')" @click="add"/>
              </template>
              <q-tree
              ref="orgTree"
              :nodes="nodes"
              node-key="id"
              label-key="name"
              selected-color="primary"
              :selected.sync="selected"
              :expanded.sync="nodeExpand">
              <template v-slot:header-root="prop">
                    <div class="row items-center" style="width:100%">
                      <div class="text-weight-bold ellipsis" style="width:82%" :title="prop.node.name">{{ prop.node.name }}</div>
                    </div>
                    <q-popup-proxy context-menu>
                      <q-list dense class="text-grey">
                        <q-item clickable v-close-popup @click="addChild( prop.node)">
                          <q-item-section>
                            <q-item-label>新增下级品类</q-item-label>
                          </q-item-section>
                        </q-item>
                        <q-item clickable v-close-popup @click="editNode( prop.node)">
                          <q-item-section>
                            <q-item-label>修改</q-item-label>
                          </q-item-section>
                        </q-item>
                        <q-item clickable v-close-popup @click="delect( prop.node)">
                          <q-item-section>
                            <q-item-label>删除</q-item-label>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </q-popup-proxy>
                  </template>
              </q-tree>
            </div>
        </q-card-section>
      </q-card>
      <q-dialog
        v-model="addOrEditDialog"
        persistent
        :maximized="maximizedToggle"
        transition-show="slide-up"
        transition-hide="slide-down">
        <q-card class="bg-white relative-position" style="min-width: 40vw">
          <q-bar class="bg-white q-py-lg">
            <strong>{{ addOrEdit === 2? '修改' : '新增'}}</strong>
            <q-space />
            <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
              <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">最小化</q-tooltip>
            </q-btn>
            <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
              <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">最大化</q-tooltip>
            </q-btn>
            <q-btn dense flat icon="close" @click="addOrEditDialog = false">
              <q-tooltip content-class="bg-white text-primary">关闭</q-tooltip>
            </q-btn>
          </q-bar>
          <q-separator />
          <q-card-section :style="maximizedToggle?'margin-bottom:53px;max-height:83.5vh': 'margin-bottom:53px;min-height:50vh;max-height:60vh'" class="scroll">
            <div class="row q-col-gutter-sm">
              <div class="col-12">
                <div :class="$v.addOrEditForm.name.$error?'text-negative': ''">名称</div>
                <q-input
                  v-model="addOrEditForm.name"
                  error-message="该字段为必填项"
                  :error="$v.addOrEditForm.name.$error"
                  @blur="$v.addOrEditForm.name.$touch"
                  dense hint/>
              </div>
              <div class="col-12">
                <div>英文名称</div>
                <q-input
                  v-model="addOrEditForm.nameEn"
                  dense hint/>
              </div>
              <div class="col-12">
                <div :class="$v.addOrEditForm.sn.$error?'text-negative': ''">序号</div>
                <q-input
                  type="number"
                  v-model="addOrEditForm.sn"
                  error-message="该字段为必填项"
                  :error="$v.addOrEditForm.sn.$error"
                  @blur="$v.addOrEditForm.sn.$touch"
                  dense hint/>
              </div>
              <div class="col-12" v-show="addOrEditForm.isLeaf = 1">
                <div :class="$v.addOrEditForm.increase.$error?'text-negative': ''">是否可以新增下一级</div>
                <q-select
                  :options="typeOptions"
                  v-model="addOrEditForm.increase"
                  emit-value
                  map-options
                  dense
                  error-message="该字段为必填项"
                  :error="$v.addOrEditForm.increase.$error"
                  @blur="$v.addOrEditForm.increase.$touch"></q-select>
              <q-tooltip anchor="top middle" self="bottom middle" :offset="[5, 5]" content-class="bg-black text-white">
              <div style="width:150px;font-size:11px">
                请谨慎选择,选择后不可更改!!!!
              </div>
              </q-tooltip>
              </div>
              <div class="col-12">
                <div>说明</div>
                <q-input
                  maxlength="200"
                  type="textarea"
                  v-model="addOrEditForm.remark"
                  dense hint/>
              </div>
            </div>
          </q-card-section>
          <q-separator class="absolute" style="bottom: 52px; left: 0"/>
          <q-card-actions align="right" class="absolute-bottom bg-white">
            <q-btn flat label="取消" color="primary" v-close-popup />
            <q-btn flat label="保存" color="primary" :loading="loadingSave" @click="addcategory"/>
          </q-card-actions>
        </q-card>
    </q-dialog>
    </div>
</template>

<script>

import { required } from 'vuelidate/lib/validators'
import { transformToTreeFormat } from 'src/utils/fns'
export default {
  name: 'leftNavs',
  props: {
    message: {
      type: String
    },
    nums: {
    }
  },
  data () {
    return {
      nodes: [
        {
          name: '9899',
          id: '7',
          children: [
            { name: '999999', id: '9' }
          ]
        }
      ],
      ticked: [],
      selected: 0,
      tickType: 'strict',
      nodeExpand: [],
      nodeSelected: '',
      addOrEdit: 1,
      tab: '',
      parentId: '0',
      maximizedToggle: false,
      loadingSave: false,
      addOrEditDialog: false,
      addOrEditForm: {
        name: '',
        nameEn: '',
        increase: 1,
        remark: '',
        sn: '1',
        isLeaf: ''
      },
      typeOptions: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ]
    }
  },
  validations: {
    addOrEditForm: {
      name: { required },
      increase: { required },
      sn: { required }
    }
  },
  created () {
  },
  watch: {
    'selected' () {
      console.log(this.selected)
      this.$emit('treeId', this.selected)
    },
    'message': {
      handler (message) {
        this.getTree()
      },
      deep: true
    },
    'nums': {
      handler (nums) {
        if (nums === '') {
          nums = ''
          this.getTree()
        } else {
          this.getTree()
        }
      },
      deep: true
    }
  },
  methods: {
    add (text) {
      if (this.addOrEdit === 1) {
        this.addOrEditForm = {
          name: '',
          nameEn: '',
          increase: 1,
          remark: '',
          sn: '1',
          isLeaf: ''
        }
        this.$v.addOrEditForm.$reset()
      }
      if (this.addOrEdit === 3) {
        this.addOrEditForm = {
          name: '',
          nameEn: '',
          increase: 1,
          remark: '',
          sn: '1'
        }
        this.parentId = text.id
        this.$v.addOrEditForm.$reset()
      }
      if (this.addOrEdit === 2) {
        this.addOrEditForm = {
          name: text.name,
          nameEn: text.nameEn,
          increase: text.increase,
          remark: text.remark,
          sn: text.sn
        }
        this.parentId = text.id
      }
      this.addOrEditDialog = true
    },
    async addcategory () {
      console.log(this.message)
      this.$v.addOrEditForm.$touch()
      if (!this.$v.addOrEditForm.$error) {
        if (this.addOrEdit === 1) {
          await this.$api({
            method: 'put',
            url: '/mdm/category/add',
            params: {
              categoryTypeId: this.message,
              sn: this.addOrEditForm.sn,
              name: this.addOrEditForm.name,
              nameEn: this.addOrEditForm.nameEn,
              increase: this.addOrEditForm.increase,
              parentId: this.parentId,
              remark: this.addOrEditForm.remark
            },
            emulateJSON: true,
            useNotify: true,
            useLoadLayer: true,
            successCallback: ({ data }) => {
              this.data = data
              this.addOrEditDialog = false
              this.parentId = 0
              this.addOrEdit = 1
            },
            errorCallback (err) {
              console.log('未处理的业务级error：', err)
            }
          })
        }
        if (this.addOrEdit === 2) {
          await this.$api({
            method: 'put',
            url: '/mdm/category/update',
            params: {
              categoryTypeId: this.message,
              sn: this.addOrEditForm.sn,
              name: this.addOrEditForm.name,
              nameEn: this.addOrEditForm.nameEn,
              increase: this.addOrEditForm.increase,
              id: this.parentId,
              remark: this.addOrEditForm.remark
            },
            emulateJSON: true,
            useNotify: true,
            useLoadLayer: true,
            successCallback: ({ data }) => {
              this.data = data
              this.addOrEditDialog = false
              this.parentId = 0
              this.addOrEdit = 1
            },
            errorCallback (err) {
              console.log('未处理的业务级error：', err)
            }
          })
        }
        if (this.addOrEdit === 3) {
          await this.$api({
            method: 'put',
            url: '/mdm/category/add',
            params: {
              categoryTypeId: this.message,
              sn: this.addOrEditForm.sn,
              name: this.addOrEditForm.name,
              nameEn: this.addOrEditForm.nameEn,
              increase: this.addOrEditForm.increase,
              parentId: this.parentId,
              remark: this.addOrEditForm.remark
            },
            emulateJSON: true,
            useNotify: true,
            useLoadLayer: true,
            successCallback: ({ data }) => {
              this.data = data
              this.addOrEditDialog = false
              this.parentId = 0
              this.addOrEdit = 1
            },
            errorCallback (err) {
              console.log('未处理的业务级error：', err)
            }
          })
        }
        this.getTree()
      }
    },
    delect (text) {
      this.$q.dialog({
        title: '删除',
        message: `确认要删除品类：${text.name} 吗？`,
        ok: true,
        cancel: true,
        persistent: true
      }).onOk(async () => {
        await this.$api({
          method: 'delete',
          url: `/mdm/category/delete/${text.id}`,
          useLoadLayer: true,
          useNotify: true,
          successCallback: ({ data }) => {
            console.log(data)
            this.getTree()
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }).onCancel(() => { })
    },
    editNode (text) {
      // console.log(text)
      this.addOrEdit = 2
      this.add(text)
    },
    addChild (text) {
      this.addOrEdit = 3
      this.addOrEditForm.isLeaf = text.isLeaf
      console.log(this.addOrEditForm)
      this.add(text)
    },
    async getTree () {
      await this.$api({
        method: 'post',
        url: `/mdm/category/query`,
        params: {
          categoryTypeId: this.message
        },
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let datas = data
          datas.map(item => {
            item.header = 'root'
          })
          let nodesCat = transformToTreeFormat(datas, 'id', 'parentId', 'children')
          this.nodes = nodesCat
          this.selected = this.nodes[0].id
          console.log(this.nodes)
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
